<style lang="less" scoped src="./background.less"></style>
<script src="./background.js"></script>

<template>
    <div>
        <Row style="font-size: 15px;">
            <Col span="22">
            背景名称：<Input v-model="queryCon.name" clearable style="width: 15%"></Input>
            <span @click="loadList"><Button type="primary" icon="android-search">查询</Button></span>
            </Col>
            <Col span="2">
            <span @click="showAdd"><Button type="primary" icon="android-add">新增</Button></span>
            </Col>
        </Row>
        <div class="main-table">
            <Table border="" :columns="columns" :data="data"></Table>
        </div>
        <div class="pagination">
            <Page :total="total" size="small" :page-size="pageSize" :current.sync="pageIndex" @on-change="loadList"
                  show-total show-elevator></Page>
        </div>
        <Modal
                v-model="viewModal"
                :title="(formData.id ? '修改': '新增') + '背景'"
                @on-ok="viewModal = false"
                @on-cancel="viewModal = false"
                width="40%"
                :mask-closable="false">
            <Form :model="formData" :label-width="75">
                <FormItem label="背景名称">
                    <Input v-model="formData.name" clearable></Input>
                </FormItem>
                <FormItem label="所属机构" v-if="baseuser.type !== 2">
                    <Select v-model="formData.organizeid" filterable clearable>
                        <Option v-for="item in orgList" :key="item.id" :value="item.id">{{item.orgName}}</Option>
                    </Select>
                </FormItem>
                <FormItem label="描述">
                    <Input v-model="formData.description" type="textarea" :rows="4" placeholder="Enter something..."></Input>
                </FormItem>
                <FormItem label="背景图">
                    <Row>
                        <div class="admin-upload-list" v-for="item in uploadList" :key="item.url">
                            <template v-if="item.status === 'finished'">
                                <img :src="item.url">
                                <div class="admin-upload-list-cover">
                                    <Icon type="ios-eye-outline" @click.native="showImg = true"></Icon>
                                    <Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>
                                </div>
                            </template>
                            <template v-else>
                                <Spin fix v-if="item.showProgress">
                                    <Icon type="load-c" size=18 class="demo-spin-icon-load"></Icon>
                                </Spin>
                            </template>
                        </div>
                        <Upload
                                ref="upload"
                                name="file"
                                :action="SERVER_HOST + 'upload/uploadFile'"
                                :format="['jpg', 'png', 'jpeg', 'gif', 'bmp', 'svg']"
                                :on-format-error="handleFormatError"
                                :on-success="handleSuccess"
                                :before-upload="handleBeforeUpload"
                                type="drag"
                                :show-upload-list="false"
                                style="display: inline-block;width:58px;"
                        >
                            <div style="width: 58px;height:58px;line-height: 58px;">
                                <Icon type="camera" size="20"></Icon>
                            </div>
                        </Upload>
                    </Row>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button type="primary" @click="save" :disabled="pictureDis">保存</Button>
                <Button type="ghost" style="margin-left: 8px" @click="viewModal = false">取消</Button>
            </div>
        </Modal>
        <Modal v-model="showImg" title="查看图片" @on-cancel="showImg = false">
            <img :src="imgUrl" width="100%" height="100%">
            <div slot="footer">
                <Button type="primary" @click="showImg = false">确定</Button>
            </div>
        </Modal>
    </div>
</template>